<%--
  User: yang
  Date: 7/31/20
  Time: 09:47
  Description: TODO  top 页面
--%>
<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- 导入核心标签库 --%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>logo top 页面</title>
    <%--  引入 css 文件   --%>
    <link rel="stylesheet" href="<c:url value="/css/main.css" /> ">
    <%--  新 Bootstrap 核心 CSS 文件 --%>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
    <%--  导入 jQuery   --%>
    <%--  最新的 Bootstrap 核心 JavaScript 文件   --%>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style type="text/css">

        #div_logo{
            width:70%;
            height:116px;
            float:left;
            letter-spacing: 100px;
            font-size: 80px;
            font-weight: bold;
            color:blue;
        }
        #div_logo_other{
            width:29%;
            height:116px;
            float:right;
        }
        #div_logo_other ul{
            float:left;
            list-style: none;
        }
        ul li{
            text-align: left;
        }
    </style>
    <script type="text/javascript">
        $(function(){//文档加载成功时 给li_time设置当前时间
            setLiTime();
            window.setInterval(setLiTime,1000);
        });
        function setLiTime(){
            $("#li_time").html(new Date().toLocaleString().fontcolor("blue").bold());
        }
        $(function(){//文档加载成功时  每隔1分钟 通过ajax获取在线人数
            setLiOnLine();
            window.setInterval(setLiOnLine,60000);
        });
        function setLiOnLine(){
            //$.get(url,data,fn,dataType);
            $.get("<c:url value='/ajax/getCountOnLine'/>",
                "time="+new Date().getTime(),//添加一个请求参数 防止使用缓存
                function(data){
                    $("#li_online").text("在线人数:"+data);
                },
                "text");
        }
    </script>
</head>
<body>
<div  id="div_logo">
    logo
</div>
<div  id="div_logo_other">
    <ul>
        <li id="li_time"></li>
        <li id="li_online"></li>
        <li id="li_time"><a  href="#">个人信息</a></li>
        <li id="li_time"><a  href="#">退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出</a></li>
    </ul>
</div>
</body>
</html>
